<template>
  <div class="special-page">
    <div class="speical-header">
      <el-row style="border-bottom: 1px solid #E9E9E9">
        <el-col :span="4" class="col-div" style="text-align: center;">指标分类</el-col>
        <el-col :span="20" class="col-div" style="background-color: #fff;">
          <span>23天</span>
          <div class="show-hidden">
            <span>展开</span><i class="el-icon-arrow-down" style="margin-left:10px"></i>
          </div>
          <div class="show-hidden">
            <span>收起</span><i class="el-icon-arrow-up" style="margin-left:10px"></i>
          </div>
        </el-col>
      </el-row>
      <el-row style="border-bottom: 1px solid #E9E9E9">
        <el-col :span="4" class="col-div" style="text-align: center;">监测时间</el-col>
        <el-col :span="20" class="col-div" style="background-color: #fff;">
          <span>30天</span>
          <span>3个月</span>
          <span>半年</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="col-div" style="text-align: center;">行政区</el-col>
        <el-col :span="20" class="col-div" style="background-color: #fff;">
          <span>长乐市</span>
        </el-col>
      </el-row>
    </div>
    <div class="speical-content">
      <span style="font-weight: bold; font-size: 18px;">指标分析结果</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    };
  },
  computed: {},

  methods: {}
}
</script>

<style lang="less" scoped>
.special-page {
  .speical-header {
    margin: 0 15px;
    background-color: #f4f4f4;
    .col-div {
      padding: 10px 0;
    }

    .show-hidden {
      float: right;
      color: #108ee9;
      margin-right: 15px;
    }
  }
  .speical-content {
    margin: 20px 15px 0;
  }
}
</style>